<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"  %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<html>
<head>
<!-- 返回上一页样式 -->
<style type="text/css">
	#goBack{
		margin-left:15px;
		color:gray;
	}
	#goBack:hover{
		color:skyblue;
		cursor:pointer; 
	}
</style>

<!-- 下拉列表框样式 -->
<style type="text/css">
	.select{
		width:120px;
		height:30px;
		border-radius:5px;
		margin-right:30px;
	}

</style>
<!-- 缩略图div样式 -->
<style type="text/css">
	#list{
		
		margin-top:20px;
		width:700px;
	}
	#imgs{
		width:130px;
		height:120px;
	}	
	div ul{
		list-style:none;
	}
	#li{
		float:left;
		border:1px solid skyblue;
		margin-right:15px;
		margin-bottom:10px;
	}
</style>
<!-- 提交按钮样式 -->
<style type="text/css">
	#submit{
		border:2px solid gray;
		color:gray;
		width:80px;
		height:25px;
		margin-top:50px;
		border-radius:5px;
		text-align:center;
	}
	#submit:hover{
	border:2px solid skyblue;
		color:skyblue;
		cursor:pointer;
	}
</style>

</head>
<body>
<div id="goBack">返回上一页</div>
<form id="form" action="<%=path%>/manager/addPhotos" method="post" enctype="multipart/form-data">
<div style="border:1px black solid6;margin-left:150px;margin-top:30px;">
	<div>
		一级分类：
		<select class="select" id="firstType">
			<option>------</option>
			<c:forEach items="${requestScope.firstTypes }" var="firstType">
				<option value="${firstType.id }">${firstType.title }</option>
			</c:forEach>
		</select>&nbsp;&nbsp;
		二级分类：	
		<select class="select" id="secondType">
			<option>------</option>
		</select>&nbsp;&nbsp;
		垃圾名称：	
		<select class="select" name="rubbishId" id="rubbishName">
			<option value="0">------</option>
		</select>			
	</div>
	 <div style="margin-top:30px;">
		选择图片：<input type="file" id="inputs" name="file" multiple="multiple"/>
		
		<div id='list'>
			<ul id="list1">
				
			</ul>
		</div>
		<div id="submit">确认提交</div>
		<input value="0" id="fileCount" type="hidden"/>
	 </div>
</div>	 
</form>


<script type="text/javascript" src="<%=path%>/static/js/jquery-3.2.1.js"></script>
<script type="text/javascript">
var isPic = false;	//是否为图片
$(function(){
	var path = "${pageContext.request.contextPath}"
	
	/*返回上一页*/
	$("#goBack").click(function(){
		location.href = path+"/manager/rubbish/rubbishPicShow?pageNum=${param.pageNum}"
	});
	
	/*一级分类改变*/
	$("#firstType").change(function(){
		var firstTypeId = $("#firstType").val();
		$("#secondType").empty();					
		$.post(path+"/manager/getSecondTypes",
				{firstTypeId:firstTypeId},
				function(secondTypes){
					$("#secondType").append("<option>------</option>");
					//console.log(secondTypes);
					for(var i=0;i<secondTypes.length;i++){
						$("#secondType").append("<option value=\""+secondTypes[i].id+"\">"+secondTypes[i].title+"</option>");
					}
		});
	});
	/*二级分类改变*/
	$("#secondType").change(function(){
		
		var secondTypeId = $("#secondType").val();
		$("#rubbishName").empty();
		$.post(path+"/manager/getRubbishNames",
				{secondTypeId:secondTypeId},
				function(rubbishNames){
					$("#rubbishName").append("<option value='0' >------</option>"); 
					for(var i=0;i<rubbishNames.length;i++){
						$("#rubbishName").append("<option value=\""+rubbishNames[i].id+"\">"+rubbishNames[i].name+"</option>");
					}
		});
	});
	/*点击确认提交*/
	$("#submit").click(function(){
		var fileCount = $("#fileCount").val();		//上传文件的数量
		var rubbishId = $("#rubbishName").val();	//所选垃圾的Id
		
		if(rubbishId=="0"){
			alert("请选择所属垃圾的种类");
		}else if(fileCount=="0"){
			alert("请选择需要上传的文件")
		}else if(!isPic){
			alert("所选文件格式有误");
		}
		else if(fileCount!="0"&&rubbishId!="0"&&isPic){
			$("#form").submit();
		}
	});
	
	
});

/*显示选择的图片*/
$(document).ready(function () {
	$("#inputs").change(function () {
		
		var fil = this.files;
		for (var i = 0; i < fil.length; i++) {
			var point = fil[i].name.lastIndexOf(".");	//文件名"."的下标
			var ext = fil[i].name.substr(point+1);		//文件后缀名
			if(ext=="bmp"||ext=="jpg"||ext=="png"||ext=="gif"){
				reads(fil[i]);
			}else{
				alert("第"+(i+1)+"张图片格式错误");
				return;
			}
			
		}
		isPic = true;
		$("#fileCount").val(fil.length);
		var line = parseInt((fil.length-0.5)/4);
		var divHeight = (line+1)*150+"px";
		$("#list").css("height",divHeight);
	});
});

function reads(fil){
	var reader = new FileReader();
	reader.readAsDataURL(fil);
	reader.onload = function(){
		$('#list1').append("<li id='li'><img id='imgs' src='"+reader.result+"'></li>");
		
	};
	
	
}

</script>
</body>
</html>